<!--
 * @Description: 空间数据表单
 * @Version: 0.1
 * @Autor: Civet
 * @Date: 2019-10-15 10:23:26
 * @LastEditors: Civet
 * @LastEditTime: 2019-10-22 16:10:55
 -->
<template>
  <div class="ct_spaceForm">
    <!-- 信息展示 -->
    <div class="ct_top">
      <el-button-group>
        <el-button type="primary" @click="checkTabs('info')">基本信息</el-button>
        <el-button type="primary" @click="checkTabs('data')">字段元数据</el-button>
      </el-button-group>
    </div>
    <!-- 表格展示 -->
    <div class="ct_body">
      <div class="ct_info" v-show="type === 'info'">
        <div class="ct_info_top">
          <el-button type="primary" @click="infoEdit">编辑</el-button>
        </div>
        <div class="ct_info_body">
          <el-scrollbar :native="false" tag="section" class="el-scroll">
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">代码：</div>
                <div class="ct_text_context">xxx</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">中文名称：</div>
                <div class="ct_text_context">ETL工具</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">所属系统：</div>
                <div class="ct_text_context">10g</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">所属数据库：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">数据来源部门：</div>
                <div class="ct_text_context">oracle</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">汇交方式：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">数据采集策略：</div>
                <div class="ct_text_context">oracle.jdbc.driver.OracleDriver</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">来源路径：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">存储路径：</div>
                <div class="ct_text_context">jdbc:oracle:thin:@172.16.171.11:1521/orcl</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">密级：</div>
                <div class="ct_text_context">福州不动产系统</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">数据公开方式：</div>
                <div class="ct_text_context">user</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">描述：</div>
                <div class="ct_text_context">xxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">标签：</div>
                <div class="ct_text_context">password</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">数据存储策略：</div>
                <div class="ct_text_context">不动产、宗地号、自然幢</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">数据组成SQL：</div>
                <div class="ct_text_context">password</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">表类型：</div>
                <div class="ct_text_context">不动产、宗地号、自然幢</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">数据现势性：</div>
                <div class="ct_text_context">password</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label"></div>
                <div class="ct_text_context"></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <div class="ct_data" v-show="type === 'data'">
        <div class="ct_center">
          <el-scrollbar :native="false" tag="section" class="el-scroll">
            <el-table
              :data="tableData"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}"
              v-loading="Loading"
              element-loading-text="数据加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(21, 29, 54, 0.8)"
              border
              highlight-current-row
            >
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="英文名称"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="中文名称"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="字段类型"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="字段长度"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="指标"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="数据生成规则"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="标签"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="入库时间"
              ></el-table-column>
              <el-table-column
                align="center"
                :show-overflow-tooltip="true"
                prop="orgName"
                label="描述"
              ></el-table-column>
              <el-table-column label="操作" width="230" align="center">
                <template slot-scope="scope">
                  <el-button size="mini" @click="lookTable(scope.$index, scope.row)">查看</el-button>
                  <el-button
                    size="mini"
                    type="warning"
                    @click="editTable(scope.$index, scope.row)"
                  >编辑</el-button>
                  <el-button size="mini" type="danger" @click="delTable(scope.$index, scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-scrollbar>
        </div>
        <div class="ct_bottom">
          <el-pagination
            layout="total, sizes, prev, pager, next"
            background
            :page-size="query.pageSize"
            :total="query.total"
            :page-count="10"
            :page-sizes="[5, 10, 20, 40]"
            :current-page="query.currentPage"
            @current-change="changePage"
            @size-change="sizeChange"
          ></el-pagination>
        </div>
      </div>
    </div>
    <!-- 编辑基本信息弹窗 -->
    <el-dialog
      title="基本信息编辑"
      top="6vh"
      width="60%"
      :visible="baseSpaceInfoDialog"
      :close-on-click-modal="false"
      @close="baseSpaceInfoClose"
    >
      <el-form
        label-width="100px"
        status-icon
        :model="editSpaceInfoForm"
        ref="editSpaceInfoForm"
        class="demo-ruleForm"
      >
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="代码" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="代码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="中文名称" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="中文名称"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="所属系统" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="所属系统"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属数据库" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="所属数据库"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据来源部门" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据来源部门"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="汇交方式" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="汇交方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据采集策略" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据采集策略"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="来源路径" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="来源路径"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="存储路径" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="存储路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密级" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="密级"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据公开方式" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据公开方式"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="描述" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="描述"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="标签" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="标签"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数据存储策略" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据存储策略"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据组成SQL" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据组成SQL"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="表类型" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="表类型"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="5">
          <el-col :span="12">
            <el-form-item label="数据现势性" prop="name">
              <el-input v-model="editSpaceInfoForm.name" placeholder="数据现势性"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12"></el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="baseSpaceInfoCancel">取消</el-button>
        <el-button type="warning" @click="baseSpaceInfoKeep">确定</el-button>
      </div>
    </el-dialog>
    <!-- 元数据字段查看弹窗 -->
    <el-dialog
      title="查看"
      top="3vh"
      width="60%"
      :visible="lookTableDialog"
      :close-on-click-modal="false"
      @close="lookTableClose"
    >
      <div class="ct_box">
        <div class="ct_top">
          <el-scrollbar :native="false" tag="section" class="el-scroll">
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">英文名称：</div>
                <div class="ct_text_context">xxx</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">中文名称：</div>
                <div class="ct_text_context">ETL工具</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">字段类型：</div>
                <div class="ct_text_context">10g</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">字段长度：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">指标：</div>
                <div class="ct_text_context">oracle</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">数据生成规则：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">标签：</div>
                <div class="ct_text_context">oracle.jdbc.driver.OracleDriver</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label">描述：</div>
                <div
                  class="ct_text_context"
                >xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
              </div>
            </div>
            <div class="ct_row">
              <div class="ct_row_left">
                <div class="ct_text_label">授权：</div>
                <div class="ct_text_context">jdbc:oracle:thin:@172.16.171.11:1521/orcl</div>
              </div>
              <div class="ct_row_right">
                <div class="ct_text_label"></div>
                <div class="ct_text_context"></div>
              </div>
            </div>
          </el-scrollbar>
        </div>
        <div class="ct_rules">
          <div class="ct_title">采集统计</div>
          <div class="ct_table">
            <el-scrollbar :native="false" tag="section" class="el-scroll">
              <el-table
                :data="infotableData"
                v-loading="infoLoading"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(21, 29, 54, 0.8)"
                border
                highlight-current-row
              >
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务流程"
                ></el-table-column>
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务节点"
                ></el-table-column>
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务规则"
                ></el-table-column>
              </el-table>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="warning" @click="lookTableKeep">确定</el-button>
      </div>
    </el-dialog>
    <!-- 元数据字段编辑弹窗 -->
    <el-dialog
      title="编辑"
      top="3vh"
      width="60%"
      :visible="editTableDialog"
      :close-on-click-modal="false"
      @close="editTableClose"
    >
      <div class="ct_box">
        <div class="ct_top">
          <el-scrollbar :native="false" tag="section" class="el-scroll"></el-scrollbar>
        </div>
        <div class="ct_rules">
          <div class="ct_title">
            采集统计
            <el-button class="btn" type="primary" @click="addNode">新增</el-button>
          </div>
          <div class="ct_table">
            <el-scrollbar :native="false" tag="section" class="el-scroll">
              <el-table
                :data="editInfotableData"
                v-loading="editInfoLoading"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(21, 29, 54, 0.8)"
                border
                highlight-current-row
              >
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务流程"
                ></el-table-column>
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务节点"
                ></el-table-column>
                <el-table-column
                  align="center"
                  :show-overflow-tooltip="true"
                  prop="type"
                  label="业务规则"
                ></el-table-column>
                <el-table-column label="操作" width="230" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="warning"
                      @click="editNodeTable(scope.$index, scope.row)"
                    >编辑</el-button>
                    <el-button
                      size="mini"
                      type="danger"
                      @click="delNodeTable(scope.$index, scope.row)"
                    >删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editTableCancel">取消</el-button>
        <el-button type="primary" @click="editTableKeep">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  name: "SpaceForm",
  watch: {},
  props: {
    Loading: {
      type: Boolean,
      default: false
    },
    infoLoading: {
      type: Boolean,
      default: false
    },
    editInfoLoading: {
      type: Boolean,
      default: false
    },
    // 编辑基本信息弹窗状态
    baseSpaceInfoDialog: {
      type: Boolean,
      default: false
    },
    // 查看弹窗状态
    lookTableDialog: {
      type: Boolean,
      default: false
    },
    // 编辑弹窗状态
    editTableDialog: {
      type: Boolean,
      default: false
    },
    query: {
      type: Object,
      default: () => {
        return {
          pageSize: 5,
          currentPage: 1,
          total: 0
        };
      }
    }
  },
  filters: {},
  data() {
    return {
      type: "info",
      editSpaceInfoForm: {
        name: ""
      },
      tableData: [{ orgName: 1 }],
      infotableData: [{ type: 1 }],
      editInfotableData: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    // tabs切换
    checkTabs(type) {
      if (this.type === type) return;
      this.type = type;
    },
    // -------------------------------基本信息方法
    // 编辑基本信息
    infoEdit() {},
    // 关闭弹窗
    baseSpaceInfoClose() {},
    // 取消弹窗
    baseSpaceInfoCancel() {},
    // 确定弹窗
    baseSpaceInfoKeep() {},
    // -------------------------------table方法
    // 查看表格
    lookTable(index, row) {},
    // 编辑表格
    editTable(index, row) {},
    // 删除表格
    delTable(index, row) {},
    // 改变当前页
    changePage(page) {},
    // 改变每页条数
    sizeChange(size) {},
    // -------------------------------table查看弹窗
    // 关闭查看弹窗
    lookTableClose() {},
    // 确定查看弹窗
    lookTableKeep() {},
    // --------------------------------table编辑弹窗
    // 关闭编辑弹窗
    editTableClose() {},
    // 取消编辑弹窗
    editTableCancel() {},
    // 确定编辑弹窗
    editTableKeep() {},
    // 新增节点
    addNode() {},
    // 编辑节点
    editNodeTable(index, row) {},
    // 删除节点
    delNodeTable(index, row) {}
  },
  destroyed() {}
};
</script>

<style scoped lang="less">
.ct_spaceForm {
  width: 100%;
  height: 100%;

  .ct_top {
    .flex();
    width: 100%;
    height: 0.5rem;
  }

  .ct_body {
    width: 100%;
    height: calc(~"100% - 0.5rem");

    .ct_row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      font-size: 0.16rem;
      margin: 0.3rem 0;

      .ct_row_left {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_row_right {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_text_label {
        width: 30%;
        text-align: right;
        font-weight: 700;
      }

      .ct_text_context {
        width: 50%;
        word-wrap: break-word;
      }
    }

    .ct_info {
      height: 100%;

      .ct_info_top {
        .flex;
        justify-content: flex-end;
        height: 0.5rem;
      }

      .ct_info_body {
        height: calc(~"100% - 0.5rem");
      }
    }

    .ct_data {
      height: 100%;

      .ct_center {
        height: calc(~"100% - 0.5rem");
      }

      .ct_bottom {
        .flex();
        justify-content: flex-end;
        height: 0.5rem;
      }
    }
  }
}

// 查看弹窗样式
.ct_box {
  width: 100%;
  height: 7rem;

  .ct_top {
    width: 100%;
    height: 3rem;

    .ct_row {
      display: flex;
      align-items: center;
      justify-content: space-around;
      width: 100%;
      font-size: 0.16rem;
      margin: 0.3rem 0;

      .ct_row_left {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_row_right {
        .flex();
        align-items: center;
        width: 50%;
      }

      .ct_text_label {
        width: 30%;
        text-align: right;
        font-weight: 700;
      }

      .ct_text_context {
        width: 50%;
        word-wrap: break-word;
      }
    }
  }

  .ct_rules {
    height: 4rem;

    .ct_title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: 0.3rem;
      padding: 0.1rem 0;
      line-height: 0.3rem;
      font-size: 0.16rem;
      font-weight: 600;
      text-indent: 1em;
      background-color: #eee;

      .btn {
        margin-right: 0.1rem;
      }
    }

    .ct_table {
      height: calc(~"100% - 0.5rem");
    }
  }
}

// 编辑弹窗样式
</style>
